<template>
	<view>
		<!-- 未登录区域 -->
		<view v-if="!isLogin" class="">
			<uni-section title="用户登录" type="line">
				<uni-card :cover="cover">
					<view>
						<uni-forms>
							<uni-forms-item label="登录名称">
								<uni-easyinput v-model="loginInfo.username"></uni-easyinput>
							</uni-forms-item>
							<uni-forms-item label="密码">
								<uni-easyinput type="password" v-model="loginInfo.password"></uni-easyinput>
							</uni-forms-item>
						</uni-forms>
					</view>
					<view slot="actions">
						<button @click="login" type="primary" size="mini">登录</button>
						<button type="warn" size="mini">重置</button>
					</view>
				</uni-card>
			</uni-section>

		</view>

		<!-- 已登录区域 -->
		<view v-if="isLogin" class="">
			<view class="line"></view>

			<view class="userinfo">
				<view class="image-box">
					<image :src="user.logo"></image>
				</view>
				<view class="">
					{{ user.tbUser.username }}
					{{ user.tbUserInfo.nickname }}
				</view>
			</view>

			<view class="line">
				<button @click="tbPage('/pages/notice/notice')" type="primary">公告信息</button>
			</view>

			<view class="line">
				<button @click="nbPage('/pages/news/news')" type="primary">新闻信息</button>
			</view>

			<view class="line">
				<button @click="logout" type="warn">安全退出</button>
			</view>

		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		api,
		tools
	} from '../../api/api.js'

	import userstore from '../../store/user.js';
	const {
		update
	} = userstore();

	import {
		storeToRefs
	} from 'pinia'

	const {
		isLogin,
		user
	} = storeToRefs(userstore())


	const loginInfo = ref({
		"username": "",
		"password": ""
	})


	const login = () => {
		api.post('/auth', loginInfo.value, (data) => {
			const icon = data.success ? 'success' : 'fail'
			uni.showToast({
				title: data.message,
				icon: icon
			})
			update()
		})
	}

	const logout = () => {
		api.delete('/auth', {}, () => {
			update()
		})
	}

	const tbPage = (page) => {
		uni.navigateTo({
			url: page
		})
	}

	const nbPage = (page) => {
		uni.navigateTo({
			url: page
		})
	}
</script>

<style>
	.line {
		border: 1px solid #dcdcdc;
		margin: 0.5rem;
	}

	.userinfo {
		display: flex;
		align-items: center;
	}

	.userinfo image {
		width: 3rem;
		height: 3rem;
	}

	.image-box {
		width: 3rem;
		height: 3rem;
		border-radius: 50%;
		overflow: hidden;
	}
</style>